<template>
	<!--
	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2671
	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema 
	 -->
	<view>
		<view class="uni-padding-wrap uni-common-mt uni-common-mb">
			<view class="uni-flex uni-common-mb-10" :class="img.transverse ? 'uni-column' : 'uni-row'" v-for="(img, index) in imageList" :key="index">
				<view class="flex-item" :class="img.transverse ? '' : 'uni-common-mr-10'">
					<cover-image :src="img.url"></cover-image>
				</view>
				<view class="flex-item" :class="img.transverse ? '' : 'uni-common-ml-10'" v-if="!img.transverse">
					<cover-image :src="img.url"></cover-image>
				</view>
			</view>
			<view class="uni-center uni-common-mt">更多资源敬请期待...</view>
		</view>
	</view>
</template>

<script>
	import images from '../../data/image.json'
	export default {
		components: {},
		data() {
			return {
				// 数据表名
				imageList: [],
			};
		},
		onLoad() {
			let data = images.data;
			for (var i = 0; i < data.length; i++) {
				// 创建对象
				var img = uni.getImageInfo;
				uni.getImageInfo({
					src: data[i].url,
					success: function (image) {
						// data[i][transverse] = image.width > image.height;
						// console.log(data[i])
					}
				});
				// data[i].transverse = img.width > img.height;
				// console.log(img.width)
				// console.log(img.height)
				// console.log(data[i].transverse)
			}
			this.imageList = data;
		},
		methods: {
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				// this.tipShow = true
				// this.formData.status = 'more'
				// this.$refs.udb.loadData({
				// 	clear: true
				// }, () => {
				// 	this.tipShow = false
				// 	uni.stopPullDownRefresh()
				// })
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {
				// this.$refs.udb.loadMore()
			},
			load(data, ended) {
				// if (ended) {
				// 	this.formData.status = 'noMore'
				// }
			}
		}
	};
</script>

<style lang="scss">
	// 默认加入 scoped ，所以外面加一层提升权重
	
</style>
